iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
嗨呦大家好我是 Jasmine~腦袋總是胡思亂想停不下來的設計師一枚\(✪ω✪)/

來到連假第二天啦,這兩天出來玩開開心心放鬆,不過鐵人賽還是得撐住,都快寫完2/3了呢><(真是破紀錄惹

今天我們接續昨天的按鈕設計,學習更進一步的「Call To Action (CTA)」按鈕設計!

什麼是 CTA 按鈕呢?簡單粗暴地說就是吸引網站瀏覽者對網站做出點擊行動的按鈕啦!

通常長得像這樣:
https://ithelp.ithome.com.tw/upload/images/20201001/20121040W1TGxFU5MT.png

典型的例子像是「購買」、「了解更多」、「前往預約」,這些都是相當常見的 CTA 按鈕,而做這個元件我個人覺得有三大需要注意的點:

  1. 顏色要醒目
  2. 文案要吸引人
  3. 位置要正確

不過今天不是設計課啦,關於這個我們之後有空再細聊,先提醒大家在設計時要多多留意~

回歸正題,我們先開始今天的課程吧!

影片來啦~
Yes

影片重點精華:

首先我們先新增一個「CTA」按鈕
https://ithelp.ithome.com.tw/upload/images/20201001/201210400UxKJGSxgk.png

上面可以描述一下你希望說明的文字,下方的是按鈕內的文字
https://ithelp.ithome.com.tw/upload/images/20201002/201210403SewxdIBcD.png
https://ithelp.ithome.com.tw/upload/images/20201002/20121040LmyzaYLsnp.png

接著在這邊貼上目標頁面的連結,並選擇是否要另開視窗
https://ithelp.ithome.com.tw/upload/images/20201002/20121040wT24iyLNG9.png

下面的就是樣式設定啦!顏色大小什麼的都可以調~跟昨天的蠻像的大家就自己玩玩看囉!
https://ithelp.ithome.com.tw/upload/images/20201002/20121040MzOCIOszAC.png
https://ithelp.ithome.com.tw/upload/images/20201002/20121040I9cT6dactu.png
https://ithelp.ithome.com.tw/upload/images/20201002/20121040XYcqWtvRp7.png
https://ithelp.ithome.com.tw/upload/images/20201002/20121040usRrze1XTu.png
https://ithelp.ithome.com.tw/upload/images/20201002/20121040r0jmYWojIa.png
https://ithelp.ithome.com.tw/upload/images/20201002/201210408bwwK2gR2V.png

那麼~今天的文章就到這裡啦!我要繼續放假了~~

我是 Jasmine,我們明天見ξ( ✿>◡❛)!

上一篇
Day 18|Divi 功能練習 10 Button Module 網頁按鈕設計
下一篇
Day 20|Divi 功能練習 12 Circle Counter Module 百分比圈圈
系列文
Divi Theme 真的那麼神嗎?WordPress 架站&傳說中最好用主題新手入坑日記!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言